Ginele Tanis's profile

Batman: Arkham Knight UX Redesign & Case Study

Role: 
UX Designer

Team Size: 
Solo
Responsibilities: 
User Research, Prototyping, Usability Tests, UI Art

Span: 
1.5 months 

Tools:
Figma, Adobe Photoshop, Adobe Illustrator, Rive, Google Forms (Usability Tests), Discord (Outreach)

Goals:
Give the player more control of the information they see while maintaining information architecture. 
Design HUD UI that makes fast-paced combat more intuitive while fitting the theme of the environment. ​​
Conduct A/B testing to gain better insight into my design decisions, how they compare to the game's original UX system and improve upon designs using feedback.
Redesigned Challenges Menu
The original menu required the player to scroll through challenges to find the right one. This redesign was meant to reduce scroll time and allow players to find challenges more quickly and efficiently. 

The original included the leaderboard and point system UI which added a lot of clutter and gave the player a lot of information at once. The redesign is meant to reduce the clutter and allow players to choose what information they want to see the most. 
Figma Prototype
First Iteration
Original Challenges Menu
Redesigned Prompts
Below is a redesign of the Detective Mode prompt. For the original, the icon for the D pad was hard to read and didn't provide enough contrast. The text was also boldened and compact. 
Original Prompt
Redesigned Batmobile Prompts
Each prompt had two buttons the player had to press but the prompts were separated with one being center part of the screen and secondary action being in the corner. The point of this redesign was to have both prompts be together. 
Original Batmobile Prompt
Reiterations
The Batmobiles' Puzzle Prompt and Combat Prompts were mostly positive but had more critical feedback regarding connectivity to the overall experience. Using the feedback, I reiterated some of the designs.
Detective Mode Prompt 
 - Instead of "Toggle Detective Mode" the word "Toggle" was left out for less text clutter.
 - Reduced the size of the D-Pad icon 
Batmobile Prompts
Moved prompts to be more centered but kept them together. 
Batman: Arkham Knight UX Redesign & Case Study
Published:

Owner

Batman: Arkham Knight UX Redesign & Case Study

A Case Study of Batman: Arkham Knight's UI Design and improvements that could be made to ensure better readability.

Published: